import React from 'react';
import { render } from 'react-dom';
import { Router, Route, Link, IndexRoute, browserHistory } from 'react-router';

require('./app.css');

const App = React.createClass({
    render: function () {
        return (
            <div>
                <header>
                    <ul>
                        <li><Link to="/app">Dashboard</Link></li>
                        <li><Link to="/inbox">Inbox</Link></li>
                        <li><Link to="/calendar">Calendar</Link></li>
                    </ul>
                    Logged in as Jane
                </header>
                {this.props.children}
            </div>
        );
    }
});

const Dashboard = React.createClass({
    render: function () {
        return (
            <div>
                <p>Dashboard</p>
            </div>
        );
    }
});

const Inbox = React.createClass({
    render: function () {
        return (
            <div>
                <p>Inbox</p>
            </div>
        );
    }
});

const Calendar = React.createClass({
    render: function () {
        return (
            <div>
                <p>Calendar</p>
            </div>
        );
    }
});

render((
    <Router history={browserHistory}>
        <Route path="/" component={App}>
            <IndexRoute component={Dashboard}/>
            <Route path="app" component={Dashboard}/>
            <Route path="inbox" component={Inbox}/>
            <Route path="calendar" component={Calendar}/>
            <Route path="*" component={Dashboard}/>
        </Route>
    </Router>
), document.querySelector('#app'));
